<template>
    <nav-bar class="detail-nav-bar">
      <div slot="left"
           class="back-box"
           @click="backIndex">
          <div class="back"></div>
      </div>
      <div slot="center" class="detail-nav-center">
        <div class="detail-nav-item"
             :class="{active: currentIndex === index}"
             v-for="(item, index) in navBarItem"
             :key="index"
             @click="tabItem(index)">
            {{item}}
        </div>
      </div>
    </nav-bar>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";

export default {
  name: "DetailNavBar",
  props: {
    navBarItem: {
      type: Array,
      default() {
        return null;
      }
    },
    currentIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    //切换按钮
    tabItem(index) {
      this.$emit('tabIndex', index);
    },

    //回到上一级
    backIndex() {
      this.$router.go(-1);
    }
  },
  components: {
    NavBar
  }
}
</script>

<style scoped>
  .detail-nav-bar {
    background-color: #f6f6f6;
    box-shadow: 0 -2px 8px #dddddd;
  }
  .detail-nav-center {
    display: flex;
  }
  .detail-nav-item {
    flex: 1;
  }
  .active {
    color: var(--color-high-text);
  }
  .back-box {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 14px;
    height: 14px;
    border-left: 2px solid #000000;
    border-bottom: 2px solid #000000;
  }
</style>